<template>
    <div>
        <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ name: 'wuxianchigoods' }">无限池赏品列表</el-breadcrumb-item>
              <el-breadcrumb-item><a>添加赏品</a></el-breadcrumb-item>
          </el-breadcrumb>
        <el-form :model="basicInfo" status-icon label-width="100px" class="demo-ruleForm">
            <el-form-item label="赏品名称">
                <el-input v-model="basicInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="赏品等级" prop="good_level_uuid">
                  <el-radio-group v-model="basicInfo.good_level_uuid" size="small">
                    <el-radio-button
                      v-for="(item, index) in game_methods"
                      :key="index"
                      :label="item.uuid"
                      >{{ item.title }}</el-radio-button
                    >
                  </el-radio-group>
            </el-form-item>
            <el-form-item label="显示价格">
                <el-input type="number" v-model="basicInfo.price"></el-input>
            </el-form-item>
            <el-form-item label="回收金额">
                <el-input type="number" v-model="basicInfo.recovery_price"></el-input>
            </el-form-item>
            <el-form-item label="赏品类型">
                    <el-radio v-model="basicInfo.sale_able" label="1">现货</el-radio>
                    <el-radio v-model="basicInfo.sale_able" label="0">预售</el-radio>
            </el-form-item>
            <el-form-item label="保底cp值">
                <div class="cpzhi">
                    <el-input class="jieshi1" v-model="basicInfo.type" placeholder="0.0000000">
                    </el-input>
                    <span class="jieshi">保底cp值,-1表示重置,0表示不计cp值, ＞ 0表示增加的cp值</span>
                </div>
            </el-form-item>
            <el-form-item label="赏品排序">
                <el-input v-model="basicInfo.order"></el-input>
            </el-form-item>
            <el-form-item label="赏品权重">
                <el-input v-model="basicInfo.good_weight"></el-input>
                <!-- 百分比或权重 -->
            </el-form-item>
              <el-form-item label="上传赏品图片">
                    <el-upload action="" list-type="picture-card" :http-request="handlePictureCardPreview" ref="upload"
                        :on-change="uploadImage" :on-preview="handlePictureCardPreview"
                        >
                        <img width="175" class="el_upload_img" v-if="basicInfo.display_url" :src="basicInfo.display_url">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交</el-button>
                </el-form-item>
        </el-form>
    </div>
</template>

<script>
import wuxian from '../../../../api/jurisdiction'
    export default {
        data() {
            return {
                basicInfo: {
                    yushou:1
                },
                game_methods:[]
            }
    },
    created() {
        console.log(localStorage.getItem("wuxianshang_game_uuid"))
        this.getwuxianmethods()
       
    },
    methods: {
        getWuxianInfo() {
            
        },
        getwuxianmethods() {
            wuxian.getgoodlevel({ params: { game_type: 3, page: 1, limit: 20 } }).then((res) => {
                console.log("赏品模式", res);
                if (res.status == 200) {
                    this.game_methods = res.data.data;
                }
            });
        },
            uploadImage(upFile) {
            let file = upFile.raw
            let newName = file.name.split('.')
            let num = crypto.randomUUID()
            let path = `houtaiguanli/wuxianshanggoods/${num}.${newName[newName.length - 1]}`
            wuxian.uploadImg({ "path": path }).then((res) => {
                let result = res.data
                const data = new FormData();
                data.append('key', path);
                data.append('Signature', result.authorization);
                data.append('x-cos-security-token', result.token);
                data.append('x-cos-meta-fileid', result.cos_file_id);
                data.append('file', file, path);
                console.log(res)
                wuxian.generalAPI(result.url, data).then((a) => {
                    wuxian.downloadImg({
                        file_list: [
                            {
                                fileid: res.data.file_id,
                                max_age: 0
                            }
                        ]
                    }).then((res) => {
                        let yunurl = res.data.file_list[0].download_url
                        this.basicInfo.display_url = yunurl
                        this.$message.success("赏品图片上传成功")
                        console.log('url', this.basicInfo.display_url)
                        })
                    })
                })
            },
            handlePictureCardPreview() {
            },
        submit() {
            if (!this.$route.params.id) {
                if (this.basicInfo.display_url) {
                    wuxian.addWuxiangood({
                        game_uuid: localStorage.getItem("wuxianshang_game_uuid"),
                        level_uuid: this.basicInfo.good_level_uuid,
                        good_name: this.basicInfo.name,
                        display_url: this.basicInfo.display_url,
                        price: this.basicInfo.price * 100,
                        recovery_price:this.basicInfo.recovery_price * 100,
                        detail: "123",
                        sale_able: 1,
                        good_weight:this.basicInfo.good_weight
                    }).then((res) => {
                        this.$message.success("添加成功")
                        this.$router.push("/layout/choushangguanli/wuxianchigoods")
                    })
                } else {
                    this.$message.warning("图片上传中")
                }
            } else {
                
            }
        }
    }
    }
</script>

<style lang="less" scoped>
.el-input{
    width:500px;
}
.cpzhi{
    position: relative;
    width: 500px;
}
.jieshi{
    position:absolute;
    color:lightgrey;
    font-size: 13px;
    right: 10px;
    top: 0px;
}
.el-breadcrumb{
    margin-bottom:20px;
}
</style>